<template>
    <div class="mars-pagination">
        <wz-pagination 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"  
            :popper-append-to-body="false"
            :pager-count="pagerCount"
            :current-page="currentPage"
            :page-size="pageSize" 
            :layout="layout" 
            :total="total"> 
        </wz-pagination>
    </div>
  </template>
  <script>
    import wzPagination from './pagination/pagination.js'

    export default {
        name: "marsPagination", // 分页组件
        components: { wzPagination },
        props:{
            currentPage:{ // 当前页
                type: Number,
                default: 1,
            },
            pageSize:{ // 当前展示多少条
                type: Number,  
                default: 10,
            },
            pagerCount:{ // 总页数，显示几页 其余...显示
                type: Number,
                default: 5,
            },
            total:{ //总条数
                type: Number,
                default: 0,
            },
            layout:{ //分页展示类型
                type: String,
                default: 'total, sizes, prev, pager, next, jumper',
            },
            
    },
    data () {
      return {
        tagTypeValue: 0,
        // currentPage: 1,
      };
    },
    mounted() {
        this.$nextTick(() =>    {
            // let classIconRight = document.getElementsByClassName('el-icon el-icon-arrow-right')
            // let classIconLeft = document.getElementsByClassName('el-icon el-icon-arrow-left')
            // // console.log(document.getElementsByClassName('el-icon el-icon-arrow-right')[0]); 
            // classIconRight[0].className = 'el-icon el-icon-caret-right'
            // classIconLeft[0].className = 'el-icon el-icon-caret-left'
        })
    },
    methods: {
        // pageSize 改变时会触发 每页条数
        handleSizeChange(size){
            this.$emit('size-change', size)
        },
        // currentPage 改变时会触发	当前页
        handleCurrentChange(page){
            this.$emit('current-change', page)
        }
    }
  }
  </script>
  <style lang="scss" scoped>
    .mars-pagination{
        color: #fff;
        font-size: 20px;
        text-align: end;
        padding: 10px;
        background-color: #fff;
    }
  </style>